import { GridContent } from '@ant-design/pro-layout';
import { forwardRef } from 'react';
import { Collapse, Pagination } from 'antd';
// import { parse } from 'qs';
const { Panel } = Collapse;

const Diff: any = forwardRef((props: { modifyLog: PRO.PageResponse; pageFun: Function }) => {
  // // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // const params: any = parse(window.location.search, { ignoreQueryPrefix: true });

  //
  // // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const onChange = (key: string | string[]) => {
    console.log(key);
  };
  const pageChange = (page: number, pageSize: number) => {
    if (props.pageFun) {
      props.pageFun(page, pageSize);
    }
  };
  const resolveData = (data: string) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const list = data.split('\n');
    const result: { line: string; content: string; mode: string }[] = [];
    list.map((line) => {
      const lineData = line.split('$$$');
      if (lineData.length == 2) {
        const modeData = lineData[1].substring(0, 1);
        result.push({
          line: lineData[0],
          content: lineData[1].substring(1),
          mode: modeData,
        });
      }
    });
    return result;
  };
  const resolveModeClass = (mode: string) => {
    switch (mode) {
      case '+':
        return 'deploy-line-add deploy-item';
      case '-':
        return 'deploy-line-reduce deploy-item';
      default:
        return 'deploy-line-none deploy-item';
    }
  };

  return (
    <GridContent>
      <Collapse defaultActiveKey={['1']} onChange={onChange} className="overflow-x">
        {props.modifyLog.list.map((item: PRO.GitDiff, index: number) => {
          // eslint-disable-next-line react/no-array-index-key
          return (
            // eslint-disable-next-line react/no-array-index-key
            <Panel header={item.file_name} key={index}>
              {item.modify_log.map((log) => {
                return resolveData(log.content).map((line) => {
                  // eslint-disable-next-line react/jsx-key
                  return (
                    // eslint-disable-next-line react/jsx-key
                    <div className={resolveModeClass(line.mode)}>
                      <div className="deploy-container">
                        <div className="deploy-line">{line.line}</div>
                        <div className="deploy-content">
                          <pre className="deploy-line-text">{line.content}</pre>
                        </div>
                      </div>
                    </div>
                  );
                });
              })}
            </Panel>
          );
        })}
      </Collapse>
      <Pagination
        onChange={pageChange}
        current={props.modifyLog.page}
        total={props.modifyLog.total}
        pageSize={props.modifyLog.page_size}
      />
    </GridContent>
  );
});

export default Diff;
